<!DOCTYPE html>
<html>
<head>
    <title>Hover</title>

    <style>
        div {
            background-color: rgb(255, 255, 255);
        }

        div:hover {
            background-color: rgb(0, 255, 255);
        }
    </style>
</head>
<body>
<div id="container1">The quick brown fox</div>
<div id="container2">Jumps over the lazy dog</div>

<script>
    var eventLog   = [];
    var container1 = document.getElementById('container1');
    var container2 = document.getElementById('container2');

    container1.addEventListener('mouseover', function () {
        if (window.getComputedStyle(container1).backgroundColor !== 'rgb(0, 255, 255)')
            throw new Error('Hover selector is not applied to #container1');

        eventLog.push('container1 mouseover');
    });

    container1.addEventListener('mouseout', function () {
        eventLog.push('container1 mouseout');
    });

    container2.addEventListener('mouseout', function () {
        eventLog.push('container2 mouseout');
    });

    container2.addEventListener('mouseover', function () {
        if (window.getComputedStyle(container2).backgroundColor !== 'rgb(0, 255, 255)')
            throw new Error('Hover selector is not applied to #container2');

        if (window.getComputedStyle(container1).backgroundColor === 'rgb(0, 255, 255)')
            throw new Error('Hover selector is still applied to #container1, through it is not hovered');

        var expectedLog = ['container1 mouseover', 'container1 mouseout'];

        if (eventLog.join(';') === expectedLog.join(';'))
            throw new Error('Hover on inputs raised');

    });
</script>
</body>
</html>
